<template>
    <div class='menu-sub-commonly'>
        <h2 class="commonly-title">常用</h2>
        <div>
            <div v-for="(index) in 5" :key="index" class="commonly-item-linebox">
                <i class="iconfont icon-jurassic_danju" style="font-size: 20px;" />
                <span class="commonly-item-text">入库|退货|调拨（运营云仓）</span>
            </div>
        </div>
    </div>
    <div v-show="subMenuVisible" class="menu-sub-box">
        <div class="submenu-box" id="subMenuBox" ref="subMenuBox">
            <div v-for="index in 3" :key="index" class="submenu-item-box">
                <h2 class="submenu-item-title">采购单</h2>
                <div>
                    <div v-for="(index) in 5" :key="index" class="submenu-item-linebox">
                        <i class="iconfont icon-jurassic_danju" style="font-size: 20px;" />
                        <span class="submenu-item-text">入库|退货|调拨（运营云仓）</span>
                    </div>
                </div>
            </div>
            <div v-for="(item, index) in lieNum" :key="index" class="splitLine"
                :style="{ left: (259 + 215 * item) + 'px' }">
            </div>
        </div>
    </div>
    <div class="Expand-btn">
        <i @click="ExpandSubMenu" class="iconfont icon-roundleftfill-copy" />
    </div>
</template>

<script lang='ts' setup name=''>
import { ref, onMounted, nextTick, computed, onUnmounted } from 'vue'

let subMenuVisible = ref(true)
function ExpandSubMenu() {
    subMenuVisible.value = !subMenuVisible.value
}

const subMenuBox = ref();

let PaneWidth = ref(0);

let lieNum = computed(() => {
    if (PaneWidth.value <= 220) {
        return 0
    } else {
        console.log(PaneWidth.value);
        let ss = Math.floor(PaneWidth.value / 230)

        return ss
    }
})


const onResize = () => {
    if (subMenuBox.value) {
        PaneWidth.value = subMenuBox.value?.offsetWidth;
    }
}
onMounted(() => {
    nextTick(() => {
        onResize()
    })
    window.addEventListener('resize', onResize);
})
onUnmounted(() => {
    window.removeEventListener('reset', onResize);
})

</script>

<style lang='scss' scoped>
.menu-sub-commonly {
    height: 100%;
    min-width: 240px;
    padding: 20px 8px 8px;
    background-color: #fff;

    .commonly-title {
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        color: #1d2129;
        padding: 5px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
    }

    .commonly-item-linebox {
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 0px 16px;
        line-height: 32px;
        font-size: 12px;
        box-sizing: border-box;

        .commonly-item-text {
            margin-left: 10px;
            width: 153px;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
    }

    .commonly-item-linebox:hover {
        background-color: #f2f3f5;
        border-radius: 5px;
    }
}

.menu-sub-box {
    height: 100%;
    padding: 15px;
    background-color: #f7f8fa;


    .submenu-box {
        height: 100%;
        border-radius: 10px;
        padding: 5px;
        background-color: #fff;
        writing-mode: vertical-lr;

        .submenu-item-box {
            display: inline-block;
            width: 215px;
            margin: 0 0 36px 0;
            writing-mode: horizontal-tb;
            // background-color: #88abce;

            .submenu-item-title {
                font-weight: 600;
                font-size: 14px;
                line-height: 20px;
                color: #1d2129;
                padding: 5px 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-sizing: border-box;
            }

            .submenu-item-linebox {
                cursor: pointer;
                display: flex;
                align-items: center;
                padding: 0px 16px;
                line-height: 32px;
                font-size: 12px;
                box-sizing: border-box;

                .submenu-item-text {
                    margin-left: 10px;
                    width: 153px;
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }
            }

            .submenu-item-linebox:hover {
                background-color: #f2f3f5;
                border-radius: 5px;
            }
        }

        .splitLine {
            position: absolute;
            border-left: 1px solid #edf0f5;
            top: 32px;
            bottom: 32px;
        }
    }
}

.Expand-btn {
    position: absolute;
    top: 50%;
    left: 225px;

    .iconfont {
        cursor: pointer;
        font-size: 30px;
        color: #498dd1;
    }
}
</style>